<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../download/font_4595003_ousnhq95mzd/iconfont.css">
  <style>
    :root {
      --themeColor: #56c6f5;
    }

    body {
      background-color: #fff;
    }

    .userShow,
    .addUser {
      border-collapse: collapse;
    }

    .userShow tr td {
      width: 20vw;
      height: 4vh;
      text-align: center;
      border: 1px solid black;
    }

    .userShow thead td {
      background-color: var(--themeColor);
      color: #fff;
    }

    .userShow {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 10px;
    }

    .userShow tbody tr td button {
      width: 5vw;
      height: 3vh;
    }

    .addUser tr td {
      width: 20vw;
      height: 4vh;
      text-align: center;
      border: 1px solid black;
    }

    .addUser {
      margin-top: 10px;
    }

    .addUser input,
    .userShow input {
      outline: none;
    }

    #show {
      width: 8vw;
      height: 3vh;
    }

    #type {
      width: 8vw;
      height: 3vh;
    }

    .addUserBtn {
      width: 8vw;
      height: 3vh;
    }

    .red {
      border: 2px red solid;
    }

    .underLine {
      height: 5px;
      background-color: var(--themeColor);
    }



    .yc {
      width: 80vw;
      max-height: 45vh;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <h2 style="margin: 5px auto 0px;">用户管理:</h2>
  <hr>
  <div class="yc">
    <table class="userShow">
      <thead>
        <tr>
          <td>账号名</td>
          <td>密码</td>
          <td>类型</td>
          <td>管理</td>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
        <td>root</td>
        <td><input type="text" class="passwdIpt" value="" placeholder="至少6位的字符">
          <span class="iconfont icon-yanjing_yincang_o"></span>
        </td>
        <td>
          <select name="" id="show">
            <option value="管理员">管理员</option>
            <option value="学生">学生</option>
          </select>
        </td>
        <td>
          <button>删除</button>
          <button>修改</button>
        </td> -->
        <!-- </tr> -->
      </tbody>
    </table>
  </div>
  <div class="underLine"></div>
  <!-- 添加用户 -->
  <h3 style="margin: 5px auto 0px;">添加：</h3>
  <table class="addUser">
    <tr class="top">
      <td><input type="text" class="userName" placeholder="至少3位的字符"></td>
      <td><input type="password" class="passwd" placeholder="至少6位的字符">
        <span class="iconfont icon-yanjing_yincang_o"></span>
      </td>
      <td>
        <select name="" id="type">
          <option value="管理员">管理员</option>
          <option value="学生">学生</option>
        </select>
      </td>
      <td>
        <button class="addUserBtn">添加用户</button>
      </td>
    </tr>
  </table>
</body>
<script src="../js/userManager.js"></script>
<script>
  function colorSx() {
    let colors = localStorage.getItem('color')
    document.documentElement.style.setProperty('--themeColor', colors)
  }
  colorSx()
  document.addEventListener('click', colorSx);
</script>



</html>